<template>
  <form>

    <md-card>
      <md-card-header :data-background-color="dataBackgroundColor">
        <h5 class="title">担保人数</h5>
      </md-card-header>

      <md-card-content>
        <div class="md-layout">
          <edit-item title="担保人个数" edittype="S">
            <select v-model="formdata.finCarModelId">
              <option value="0">0</option>
              <option value="1">1</option>
            </select>
          </edit-item>
        </div>
      </md-card-content>
    </md-card>

    <md-card v-if="formdata.finCarModelId=='1'">
      <md-card-header :data-background-color="dataBackgroundColor">
        <h4 class="title">担保人1</h4>
      </md-card-header>

      <md-card-content>
        <div class="md-layout">

          <edit-item title="姓名*">
            <md-input v-model="formdata.gua1CustomerName"></md-input>
          </edit-item>

            <edit-item title="手机号码*">
            <md-input v-model="formdata.gua1Mobile"></md-input>
          </edit-item>

          <edit-item title="证件类型*">
              <select v-model="formdata.gua1PaperType">
                <option v-for="option in g_mlist('10')" v-bind:value="option.itemvalue" :key="option.itemvalue">
                  {{ option.itemcontent }}
                </option>
              </select>
          </edit-item>

          <edit-item title="证件号码">
            <md-input v-model="formdata.gua1PaperNo"></md-input>
          </edit-item>

          <edit-item title="身份证有效期">
            <md-input v-model="formdata.gua1PaperNoStartTime" style="widht:40%"></md-input>
            <span style="margin:0 0 5px;">~</span>
            <md-input v-model="formdata.gua1PaperNoEndTime"></md-input>
          </edit-item>

          <edit-item title="出生日期">
            <md-input v-model="formdata.gua1BirthDay" type="date"></md-input>
          </edit-item>

          <label-item title ="年龄" v-model="formdata.gua1Age"></label-item>

          <edit-item title="性别" edittype="R">
            <input type="radio" value="1" v-model="formdata.gua1Sex">男
            <input type="radio" value="2" v-model="formdata.gua1Sex">女
          </edit-item>

          <edit-item title="与申请人关系" edittype="S">
            <select v-model="formdata.appRelationShipCd1">
              <option v-for="option in g_mlist('400')" v-bind:value="option.itemvalue" :key="option.itemvalue">
                {{ option.itemcontent }}
              </option>
            </select>
          </edit-item>

          <edit-item title="关系描述">
            <md-input v-model="formdata.appRelationShip1"></md-input>
          </edit-item>

          <edit-item title="婚姻状况" edittype="S">
            <select v-model="formdata.gua1MaritalStatus">
              <option v-for="option in g_mlist('11')" v-bind:value="option.itemvalue" :key="option.itemvalue">
                {{ option.itemcontent }}
              </option>
            </select>
          </edit-item>

          <edit-item title="配偶姓名">
            <md-input v-model="formdata.gua1PartnerName"></md-input>
          </edit-item>

          <edit-item title="配偶证件类型">
            <select v-model="formdata.gua1PartnerPaperType">
              <option v-for="option in g_mlist('10')" v-bind:value="option.itemvalue" :key="option.itemvalue">
                {{ option.itemcontent }}
              </option>
            </select>
          </edit-item>

          <edit-item title="配偶证件号码">
            <md-input v-model="formdata.gua1PartnerPaperNo"></md-input>
          </edit-item>

          <edit-item title="居住省市" edittype="S">
            <select v-model="formdata.gua1Province">
              <option v-for="option in g_mlist('22')" v-bind:value="option.itemvalue" :key="option.itemvalue">
                {{ option.itemcontent }}
              </option>
            </select>
            <select v-model="formdata.gua1City">
              <option v-for="option in g_mlist('29')" v-bind:value="option.itemvalue" :key="option.itemvalue">
                {{ option.itemcontent }}
              </option>
            </select>
          </edit-item>

          <edit-item title="居住地址">
            <md-input v-model="formdata.gua1Address"></md-input>
          </edit-item>

          <edit-item title="户籍省市" edittype="S">
            <select v-model="formdata.gua1ResidenceProvince">
              <option v-for="option in g_mlist('22')" v-bind:value="option.itemvalue" :key="option.itemvalue">
                {{ option.itemcontent }}
              </option>
            </select>
            <select v-model="formdata.gua1ResidenceCity">
              <option v-for="option in g_mlist('29')" v-bind:value="option.itemvalue" :key="option.itemvalue">
                {{ option.itemcontent }}
              </option>
            </select>
          </edit-item>

          <edit-item title="住房所有权" edittype="S">
            <select v-model="formdata.gua1HouseOwnerShip">
              <option v-for="option in g_mlist('14')" v-bind:value="option.itemvalue" :key="option.itemvalue">
                {{ option.itemcontent }}
              </option>
            </select>
          </edit-item>

          <edit-item title="主要税后年收入">
            <md-input v-model="formdata.gua1MainIncome"></md-input>
          </edit-item>

          <edit-item title="现工作单位名称">
            <md-input v-model="formdata.gua1WorkUnitName"></md-input>
          </edit-item>

          <edit-item title="单位电话">
            <md-input v-model="formdata.gua1WorkTelArea" style="width:50px;"></md-input> -
            <md-input v-model="formdata.gua1WorkTel" style="width:50px;"></md-input> *
            <md-input v-model="formdata.gua1WorkTelExt" style="width:50px;"></md-input>
          </edit-item>

          <edit-item title="工作单位省市" edittype="S">
            <select v-model="formdata.finCarModelId">
              <option v-for="option in g_mlist('29')" v-bind:value="option.itemvalue" :key="option.itemvalue">
                {{ option.itemcontent }}
              </option>
            </select>
            <select v-model="formdata.finCarModelId">
              <option v-for="option in g_mlist('29')" v-bind:value="option.itemvalue" :key="option.itemvalue">
                {{ option.itemcontent }}
              </option>
            </select>
          </edit-item>

          <edit-item title="银行卡号 ">
            <md-input v-model="formdata.gua1BankAccount"></md-input>
          </edit-item>

          <edit-item title="银行预留手机号 ">
            <md-input v-model="formdata.gua1BankMobile"></md-input>
          </edit-item>

          <edit-item title="担保人1备注*" :mergelen="5">
            <textarea v-model="formdata.gua1Comment" style="width:100%;" rows="4"></textarea>
          </edit-item>

        </div>

      </md-card-content>
    </md-card>

  </form>
</template>
<script>
import LabelItem from './Unit/LabelItem.vue'
import EditItem from './Unit/EditItem.vue'

export default {
  components: {
    'label-item': LabelItem,
    'edit-item': EditItem
  },
  data () {
    return {
    }
  },
  props: {
    dataBackgroundColor: {
      type: String,
      default: ''
    },
    formdata: {}
  },
  watch: {
    'formdata.finCarModelId': function (val) {
      console.log('车型' + val)
    }
  },
  mounted: function () {

  }
}

</script>
<style>

</style>
